<template>
    <div class="people-pack">
        <div class="header">
            <div class="head-item">
                <p>管家账户</p>
                <el-select v-model="searchQuery.user_ids" placeholder="请选择管家账户" clearable collapse-tags multiple class="item-input"> 
                    <el-option v-for="item in manageList" :key="item.userId" :label="item.userName" :value="item.userId" />
                </el-select>
            </div>
            <div class="head-item">
                <p>账户名称/ID</p>
                <el-input v-model="searchQuery.id_name" placeholder="账户名称/ID" class="item-input" clearable></el-input>
            </div>
            <div class="head-item">
                <el-button type="primary" @click="searchList">搜索</el-button>
                <el-button @click="resetList">重置</el-button>
            </div>
        </div>
        <div class="table">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="userName" label="管家名称" fixed="left">
                </el-table-column>
                <el-table-column prop="userId" label="账户ID" >
                </el-table-column>
                <el-table-column prop="dspNames_title" label="投放类型" >
                </el-table-column>
                <el-table-column label="更新数量" >
                <template slot-scope="scope">
                    <p>{{ scope.row.today_num- scope.row.last_num}}</p>
                </template>
                </el-table-column>
                <el-table-column prop="last_num" label="更新前数据量" >
                </el-table-column>
                <el-table-column prop="today_num" label="更新后数据量" >
                </el-table-column>
                <el-table-column prop="update_time" label="更新时间" >
                </el-table-column>
                <el-table-column prop="status" label="更新状态" >
                </el-table-column>
                <el-table-column prop="remark" label="备注" >
                </el-table-column>
            </el-table>
        </div>
        <pagination v-show="total > 0" :total="total" @pagination="init"  :page.sync="searchQuery.page"
            :limit.sync="searchQuery.pageSize"/>
    </div>
</template>
<script>
import { getManageList } from "@/api/placement";
import { audienceList } from "@/api/peoplePack.js"
export default {
    data() {
        return {
            total:0,
            manageList:[],
            searchQuery:{
                user_ids:[],
                id_name:'',
                pageSize:20,
                page:1
            },
            tableData:[]
        }
    },
    methods: {
        searchList(){
            this.searchQuery.page=1
            this.init()
        },
        resetList(){
            this.searchQuery={
                user_ids:[],
                id_name:'',
                pageSize:20,
                page:1
            }
            this.init()
        },
        getManage(){
            getManageList().then(res => {
                this.manageList = res.data
            })
        },
        init(){
            audienceList(this.searchQuery).then(res=>{
                this.total=res.data.total
                this.tableData=res.data.data
            })
        }
    },
    created() {
        this.getManage()
        this.init()
    },
}
</script>
<style lang="scss" scoped>
::v-deep .el-select .el-tag{
    max-width: 75%;
}
::v-deep .el-select__tags{
    flex-wrap: nowrap;
}
.people-pack {
    padding: 24px;

    .header {
        width: 100%;
        display: flex;
        justify-content: flex-start;

        .head-item {
            margin-right: 30px;
            display: flex;
            align-items: center;

            p {
                font-size: 14px;
                color: #606266;
                font-weight: 700;
                margin-right: 15px;
            }

            .item-input {
                width: 230px;
            }
        }
    }
    .table{
        margin: 24px 0;
    }
}
</style>